<template>
    <div class="clearfix bg_write">
        <el-col :span="24"
            class="content_title ">
            <el-col :span="12">
                <HeadTitle></HeadTitle>
            </el-col>
            <el-col :span="12">
            </el-col>
        </el-col>
        <el-col :span="24"
            class="bg_write pd_20">
            <div class="sups_tub clearfix mgt15"
                style="margin-top:15px;position: inherit;">
                <div class="tabs j-tab clearfix mgt10 mgb20 tl">
                    <a href
                        class="tabs_a f_l"
                        :class="{ template_active: templateIndex == i }"
                        @click.prevent="getTemplateItem(item, i)"
                        v-for="(item, i) in templateList"
                        :key="i">{{ item.title }}</a>
                </div>
                <div class="tabcontent">
                    <div class="tabitem"
                        v-for="(item, i) in templateItemList"
                        :key="i">
                        <a href
                            :class="{ template_item_active: templateItemIndex == i }"
                            @click.prevent="getSmsInfo(item, i)"
                            class="f_l">{{ item.title }}</a>
                    </div>
                </div>
            </div>
            <h1 class="sup-right-title tl">-消息编辑</h1>
            <div id="diy-phone-boxx">
                <div id="diy-phone"
                    class="mgt50">
                    <div class="diy-phone-header">
                        <i class="diy-phone-receiver"></i>
                        <div class="diy-phone-title j-pagetitle"></div>
                    </div>
                    <div class="diy-phone-contain"
                        id="j-materialPrev">
                        <dl class="materialPrePanel mgt20 tl">
                            <dt v-if="form.content">
                                <div class="single-summary pd10"
                                    v-html="form.content"></div>
                            </dt>
                        </dl>
                        <dl class="materialPrePanel mgt20 bgcfff border"
                            v-if="form.types == 2">
                            <dt class="mb10 mt10"
                                v-if="zhuTitle">
                                <a href="awdfr"
                                    target="_blank">
                                    <div class="cover-wrap">
                                        <img :src="$fnc.getImgUrl(zhuTitle.piclink)"
                                            class="img-cover" />
                                    </div>
                                    <h2 class="w262">{{ zhuTitle.title }}</h2>
                                </a>
                            </dt>
                            <dd class="newWidth"
                                v-show="fuTitle"
                                :key="i"
                                v-for="(item, i) in fuTitle">
                                <a class="border-top_1 p"
                                    href
                                    target="_blank">
                                    <h3>{{ item.title }}</h3>
                                    <div class="pic">
                                        <img :src="$fnc.getImgUrl(item.piclink)"
                                            class="img-cover" />
                                    </div>
                                </a>
                            </dd>
                        </dl>
                        <img v-if="form.types == 3 && imgUrl"
                            :src="imgUrl"
                            alt />
                    </div>
                    <i class="diy-phone-footer"></i>
                </div>
                <div class="relative f_l floatBox-width mgt50"
                    style="margin-left: 25px;position: relative;">
                    <el-form :rules="formYZ"
                        ref="form"
                        class="tl form_mar"
                        label-width="100px"
                        :model="form">
                        <el-form-item class="info_label hongxing from_label from_label_l"
                            style="margin-bottom: 20px !important;"
                            label="消息内容">
                            <editor class="editor_wx"
                                :config="config"
                                v-model="form.content"
                                upload-url="/api/common/upload/index/"
                                fileName="file" />
                            <!-- <ueditor :server-url="UEditorUrl" @getSuess="getS" v-model="form.content" :z-index='21' ueditor-path='/ueditor/' :initial-frame-height='420' :auto-height-enabled='false' :options='config1'></ueditor> -->
                        </el-form-item>

                        <ul id="message-addon"
                            class="from_label"
                            style="left:461px;top:30px;height: 164px;margin-left: 10px;">
                            <li class="j-msgAddon-txt"
                                v-for="(item, i) in form.op"
                                @click="addContent(item)"
                                :key="i">
                                {{ item }}
                                <br />
                            </li>
                        </ul>

                        <el-form-item class="hongxing"
                            label="底部/标题"
                            style="margin-bottom: 15px !important;">
                            <el-input size="small"
                                v-model="form.bottom"></el-input>
                        </el-form-item>
                        <el-form-item class="hongxing"
                            label="微信发送">
                            <switchc :value="form.wx_show"
                                text="开启|关闭"
                                @change="getIskeckWx"></switchc>
                        </el-form-item>
                        <el-form-item class="hongxing"
                            label="APP发送">
                            <switchc :value="form.app_show"
                                @change="getIskeckApp"
                                text="开启|关闭"></switchc>
                        </el-form-item>
                        <!-- <el-form-item class="hongxing"
                            label="站内信发送">
                            <switchc :value="form.web_show"
                                @change="getIskeckWeb"
                                text="开启|关闭"></switchc>
                        </el-form-item> -->
                        <!-- <el-form-item class="hongxing" label="短信发送">
              <switchc :value="form.tel_show" @change="getIskeckTel" text="开启|关闭"></switchc>
            </el-form-item>-->
                    </el-form>
                    <!-- 小箭头 -->
                    <i class="arrow arrow_out top150"></i>
                    <!-- 科 -->
                    <!-- <i class="arrow arrow_in top150"></i> -->
                </div>
            </div>
        </el-col>
        <!-- <el-col :span="24" class="wxtext_bg">
            <div class="wxtext"></div>
            <el-button  :loading='$store.state.isLoading' type="primary" icon="el-icon-edit" @click="editSave" size="small">保存</el-button>   
    </el-col>-->
        <el-col :span="22"
            class="men_add">
            <el-card shadow="always">
                <el-button :loading="$store.state.isLoading"
                    @click="editSave"
                    @keydown.13="editSave">保存</el-button>
            </el-card>
        </el-col>
    </div>
</template>

<style lang="less" scoped>
#diy-phone {
    width: auto;
}
#diy-phone-boxx {
    display: flex;
    .from_label_l {
        width: 70%;
    }
    .floatBox-width {
        flex: 0 0 65%;
    }
}
</style>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
// import ueditor from '@/components/ueditor/Ueditor.vue';
import switchc from "../currency/Swich";
import editor from "@/components/currency/editor.vue";
export default {
    components: {
        HeadTitle,
        editor,
        switchc
    },
    data () {
        return {
            labelPosition: "top",
            showTitle: true,
            form: {
                content: "",
                title: "",
                wx_show: "",
                app_show: "",
                web_show: "",
                tel_show: "",
                bottom: "",
                id: ""
            },
            formYZ: {},
            config1: {
                initialFrameWidth: 1200,
                initialFrameHeight: 115,
                wordCount: false,
                initialContent: "",
                enableAutoSave: false,
                toolbars: [["removeformat", "link", "unlink"]]
            },
            config: {
                qllink: true
            },
            UEditorUrl: "",
            templateList: [],
            templateItemList: [],
            templateIndex: 0,
            templateItemIndex: "468413524531",
            insertList: ["{插入ID号}", "{插入昵称}", "{插入店铺}", "{插入会员个数}"],
            UEditorSuess: false,
        };
    },
    methods: {
        getTemplateList () {
            var data = {};
            this.$api.getWechat.getTemplateList(data).then(res => {
                if (res.data.code == 200 && res.data.status == 1) {
                    this.templateList = res.data.result;
                    this.getTemplateItem(this.templateList[0]);
                }
            });
        },
        getTemplateItem (item, index) {
            console.log(item);
            this.form = {
                content: "",
                title: "",
                wx_show: "0",
                app_show: "0",
                web_show: "0",
                tel_show: "0",
                bottom: "",
                id: ""
            };
            index = index || 0;
            this.templateIndex = index;
            this.templateItemIndex = "468413524531";
            var params = { tid: item.id };
            this.$api.getWechat.getWxSms(params).then(res => {
                if (
                    res.data.code == 200 &&
                    res.data.status == 1 &&
                    res.data.result.length > 0
                ) {
                    this.templateItemList = res.data.result;

                    this.templateItemIndex = 0;
                    this.form = res.data.result[0];
                }
            });
        },
        getSmsInfo (item, i) {
            console.log(item);
            this.templateItemIndex = i;
            if (item.content == "") {
                item.content = "";
            }
            if (item.bottom == "") {
                item.bottom = "";
            }
            if (item) {
                this.form = item;
            }
        },
        addContent (item) {
            var str = this.form.content;
            str = str.replace(/<p>|<\/p>/g, "");
            this.form.content = str + item;
        },
        editSave () {
            if (this.form.content == "") {
                this.$fnc.alertError("错误", "内容不能为空");
                return false;
            }
            var params = {};
            if (this.form.bottom == "") {
                this.form.bottom = "";
            }
            //console.log(this.form)
            // params=this.form;
            params.id = this.form.id || "";
            params.title = this.form.title || "";
            params.content = this.form.content || "";
            params.tid = this.form.tid || "";
            params.wx_show = this.form.wx_show || "";
            params.app_show = this.form.app_show || "";
            params.web_show = this.form.web_show || "";
            params.tel_show = this.form.tel_show || "";
            params.bottom = this.form.bottom || "";

            this.$api.getWechat.uadateWxSms(params).then(res => {
                if (res.data.code == 200 && res.data.result) {
                    this.$fnc.alertSuccess({ text: "保存成功" }); //成功弹出框
                } else {
                    this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
                }
            });
        },
        getIskeckWx (val) {
            this.form.wx_show = val;
        },
        getIskeckApp (val) {
            this.form.app_show = val;
        },
        getIskeckWeb (val) {
            this.form.web_show = val;
        },
        getIskeckTel (val) {
            this.form.tel_show = val;
        },

        getS (s) {
            this.UEditorSuess = s;
        }
    },
    created () {
        this.UEditorUrl = "";
        this.getTemplateList();
    },
    watch: {},
    mounted () { },
    computed: {}
};
</script>
